<template> 
    <el-container  >
      <el-header style="color: white"> 
       <div class="header-left">
          <img src="../assets/head.png" alt="">
        <h1 style="line-height: 60px">课堂在线后台管理系统</h1> 
       </div>
       <div class="header-right">
<el-dropdown @command="dropdown">
  <el-button type="primary">
    欢迎<i class="el-icon-arrow-down el-icon--right"></i>
  </el-button>
  <el-dropdown-menu slot="dropdown">
    <el-dropdown-item command="info">个人信息</el-dropdown-item>
    <el-dropdown-item command="logout">退出</el-dropdown-item> 
  </el-dropdown-menu>
</el-dropdown>
       </div>
      </el-header>     
      <el-container> 
          <mysaside></mysaside> 
        <el-main>
          <router-view></router-view>
        </el-main>
      </el-container>
    </el-container> 
</template>

<script>
import mysaside from "../components/mysaside.vue";
export default {
  name:'about',
  components: {
    mysaside,
  },
  methods: {
    dropdown(val) {
      if(val==='info'){
        // 跳转到info个人信息页面
      
      }else{ 
        //  1.删除token
        sessionStorage.clear()
        this.$message.info("成功退出登录")
        // 2.页面跳转
        this.$router.push("/")
      }
    }
  },
};
</script>

<style lang="scss" scoped>

.header-left{
    display: flex; 
    align-items: center;
    img{
      width:50px;
        background-color:#545c64;
      height: 50px;  
    }
    h1{
      margin-left: 20px;
    }
}
.el-card__body, .el-main{
  padding: 0;
}
.el-header{
  display: flex;
  align-items: center; 
  justify-content: space-between;
}
.el-header, .el-footer { 
    color: #333;  
    background-color:#545c64;
  
  }
  
  .el-aside {
  background-color:#545c64;
    color: #333; 

  }
  
  
  //侧边栏的高度，修改父元素的高度
.home-container,.el-container,.el-aside{
  height: 100%; 
  color: #333;

}
  
</style>